<template>
  <!-- 新增-->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_new"
    :title="`新增赛季数据`"
  >
    <template #content>
      <div class="_box0">
        <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
          <template v-for="item in set.md_box">
            <template v-if="item.type == 'input' && item.new != true">
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 80px">
                    <div>{{ item.name }}</div>
                  </div>
                  <div class="_2_val">
                    <template v-if="item.type == 'input'">
                      <n-input
                        :size="cfg.sizebtn"
                        v-model:value="data.new_data[item.key]"
                        :placeholder="item.tips"
                      />
                    </template>
                  </div>
                </div>
              </n-gi>
            </template>

            <template v-if="item.type == 'cb_list'">
              <n-gi span="2">
                <div class="stitle">· 首领信息 ·</div>
              </n-gi>
              <template v-for="(item2, key2) in data.new_data[item.key]">
                <n-gi span="1">
                  <div class="_banr">
                    <div class="_2_title2" style="width: 80px">
                      <div>首领[{{ key2 }}]名称</div>
                    </div>
                    <div class="_2_val">
                      <n-select
                        label-field="name"
                        value-field="name"
                        placeholder="请选择首领名称"
                        to=".v1_body"
                        v-model:value="data.new_data[item.key][key2].name"
                        filterable
                        :options="data.bosslist"
                      />
                    </div>
                  </div>
                </n-gi>
                <n-gi span="1">
                  <div class="_banr">
                    <div class="_2_title2" style="width: 80px">
                      <div>首领[{{ key2 }}]属性</div>
                    </div>
                    <div class="_2_val">
                      <n-select
                        to=".v1_body"
                        placeholder="请选择首领属性"
                        v-model:value="data.new_data[item.key][key2].element"
                        filterable
                        :options="cfg.ss"
                      />
                    </div>
                  </div>
                </n-gi>
              </template>
            </template>
          </template>
        </n-grid>
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.save_new(data.new_data)"
        >新增数据</n-button
      >
    </template>
  </component>

  <!-- 编辑-->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_edit"
    :title="`编辑〔${data.ld_data.name}〕赛季数据`"
  >
    <template #content>
      <div class="_box0">
        <n-grid x-gap="8" y-gap="8" :cols="parseInt(cfg.sswd / 450)">
          <template v-for="item in set.md_box">
            <template v-if="item.type == 'input'">
              <n-gi span="1">
                <div class="_banr">
                  <div class="_2_title2" style="width: 80px">
                    <div>{{ item.name }}</div>
                  </div>
                  <div class="_2_val">
                    <template v-if="item.type == 'input'">
                      <n-input
                        :size="cfg.sizebtn"
                        v-model:value="data.ld_data[item.key]"
                        :placeholder="item.tips"
                      />
                    </template>
                  </div>
                </div>
              </n-gi>
            </template>
            <template v-if="item.type == 'cb_list'">
              <n-gi span="2">
                <div class="stitle">· 首领信息 ·</div>
              </n-gi>
              <template v-for="(item2, key2) in data.ld_data[item.key]">
                <n-gi span="1">
                  <div class="_banr">
                    <div class="_2_title2" style="width: 80px">
                      <div>首领[{{ key2 }}]名称</div>
                    </div>
                    <div class="_2_val">
                      <n-select
                        label-field="name"
                        value-field="name"
                        placeholder="请选择首领名称"
                        to=".v1_body"
                        v-model:value="data.ld_data[item.key][key2].name"
                        filterable
                        :options="data.bosslist"
                      />
                    </div>
                  </div>
                </n-gi>
                <n-gi span="1">
                  <div class="_banr">
                    <div class="_2_title2" style="width: 80px">
                      <div>首领[{{ key2 }}]属性</div>
                    </div>
                    <div class="_2_val">
                      <n-select
                        to=".v1_body"
                        placeholder="请选择首领属性"
                        v-model:value="data.ld_data[item.key][key2].element"
                        filterable
                        :options="cfg.ss"
                      />
                    </div>
                  </div>
                </n-gi>
              </template>
            </template>
          </template>
        </n-grid>
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="set.edit(data.ld_data)"
        >编辑数据</n-button
      >
    </template>
  </component>
  <div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px">
    <div class="nbox1">
      <div v-if="cfg.qxpd(['bz']) == true">
        <n-flex justify="center" align="center">
          <n-button type="warning" @click="set.new">新增赛季</n-button>
        </n-flex>
      </div>
      <n-infinite-scroll style="height: 100vh" :distance="150" @load="set.worklist_load">
        <n-grid
          v-if="$set.mb == false"
          x-gap="12"
          y-gap="12"
          :cols="parseInt(cfg.sswd / 300)"
          class="item"
        >
          <template v-for="item in data.worklist2">
            <n-gi span="1">
              <div class="_work_sid_list">
                <n-grid class="ngrid" :y-gap="8" :x-gap="8" :cols="2">
                  <n-gi span="2 ">
                    <n-statistic label="赛季信息"
                      >S{{ item.season }} - {{ item.name }}</n-statistic
                    >
                  </n-gi>

                  <n-gi>
                    <n-statistic label="首领列表">
                      <div class="_dfc">
                        <template v-for="item2 in item.boss">
                          <div style="margin-top: 4px; margin-bottom: 4px">
                            {{ cfg?.bossnamelist?.[item2.name]?.bname }} ({{
                              item2.element
                            }})
                          </div>
                        </template>
                      </div>
                    </n-statistic>
                  </n-gi>
                  <n-gi>
                    <n-statistic label="会战日期">
                      <div style="margin-bottom: 4px">
                        {{ item.stime }}
                      </div>
                      <div>{{ item.etime }}</div>
                      <br />
                      <div>
                        <n-button
                          type="gt_n"
                          v-if="cfg.qxpd(['bz']) == true"
                          :size="cfg.sizebtn"
                          @click="set.open_edit(item)"
                        >
                          编辑
                        </n-button>
                      </div>
                    </n-statistic>
                  </n-gi>
                </n-grid>
              </div>
            </n-gi>
          </template>
        </n-grid>
        <n-grid
          v-if="$set.mb == true"
          x-gap="12"
          y-gap="12"
          :cols="parseInt(cfg.sswd / 150)"
          class="item"
        >
          <template v-for="item in data.worklist2">
            <n-gi span="1" @click="set.open_edit(item)">
              <div class="_work_sid_list">
                <n-grid class="ngrid" :y-gap="8" :x-gap="8" :cols="2">
                  <n-gi span="2">
                    <n-statistic label="赛季信息"
                      >S{{ item.season }}-{{ item.name }}</n-statistic
                    >
                  </n-gi>

                  <n-gi span="2">
                    <n-statistic label="首领列表">
                      <div class="_dfc">
                        <template v-for="item2 in item.boss">
                          <div style="margin-top: 4px; margin-bottom: 4px">
                            {{ cfg?.bossnamelist?.[item2.name]?.bname }} ({{
                              item2.element
                            }})
                          </div>
                        </template>
                      </div>
                    </n-statistic>
                  </n-gi>
                  <n-gi span="2">
                    <n-statistic label="会战日期">
                      <div style="margin-bottom: 4px">
                        {{ item.stime }}
                      </div>
                      <div>{{ item.etime }}</div>
                    </n-statistic>
                  </n-gi>
                </n-grid>
              </div>
            </n-gi>
          </template>
        </n-grid>
      </n-infinite-scroll>
    </div>
  </div>
</template>
<style scoped>
._work_sid_list {
  background-color: #3d4656;
  padding: 8px;
  display: flex;
  flex-direction: row;
  height: 100%;
  border-radius: 5px;
}
._dfc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import { get_boss, get_work_season, getrole, getbossv2 } from "@/cfg/function.js";
import { Delete, Add } from "@vicons/carbon";

export default {
  components: {
    Delete,
    Add,
  },
  props: ["data"],
  setup(props) {
    const set = {
      md_box: [
        {
          type: `input`,
          name: `赛季ID`,
          tips: `请输入赛季ID`,
          key: `season`,
        },
        {
          type: `input`,
          name: `赛季名称`,
          tips: `请输入赛季名称`,
          key: `name`,
        },
        {
          type: `input`,
          name: `开始日期`,
          tips: `请输入开始日期 xxxx-xx-xx`,
          key: `stime`,
        },
        {
          type: `input`,
          name: `结束日期`,
          tips: `请输入结束日期 xxxx-xx-xx`,
          key: `etime`,
          new: true,
        },
        {
          type: `cb_list`,
          addname: `添加首领`,
          name: `首领列表`,
          tips: ``,
          key: `boss`,
        },
      ],

      save_new: async (nd) => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/guild_work",
            t3: "new",
            data: nd,
            authkey: cfg.user.authkey,
          },
        });
        if (res.data.code == 0) {
          data.md_new = false;
          cfg.msg.success(res.data.msg);
          data.worklist.unshift(nd);
          data.worklist[0]._id = {
            $oid: res.data.data.id,
          };
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
      edit: async (ld) => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/guild_work",
            t3: "edit",
            data: ld,
            authkey: cfg.user.authkey,
          },
        });
        if (res.data.code == 0) {
          data.md_edit = false;
          cfg.msg.success(res.data.msg);
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
      worklist_load: () => {
        for (let i = 0; i < 4; i++) {
          if (data.worklist_limit < data.worklist.length) {
            data.worklist2.push(data.worklist[data.worklist_limit]);
            data.worklist_limit = data.worklist_limit + 1;
          }
        }
      },
      tabhand: async (id) => {
        cfg.router.replace({
          query: {
            ...cfg.route.query,
            tab: id,
          },
        });
      },
      open_edit: (dt) => {
        data.md_edit = true;
        data.ld_data = dt;
      },
      new: () => {
        data.md_new = true;
        data.new_data = {
          boss: [{}, {}, {}, {}],
        };
      },
    };
    const odata = props.data;
    let data = reactive({
      worklist_limit: 0,
      worklist2: [],
      ld_data: {},
      new_data: {},
      bosslist: [],
      worklist: [],
      md_new: false,
      md_edit: false,
    });

    onMounted(async () => {
      await set.tabhand(data.tab);
      data.worklist = await get_work_season();
      data.worklist_limit = 20;
      data.worklist2 = data.worklist.slice(0, data.worklist_limit);
      data.bosslist = odata.bosslist;
    });
    return { odata, data, cfg, set };
  },
};
</script>
